<template>
<l-layout class="l-tab-page" v-loading="pageLoading">
    <l-panel style="padding:0;" >
        <template #toolLeft >
            <div class="l-panel--item" >
                <el-input :placeholder="$t('请输入编码/名称')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                    <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </template>
        <template #toolRight >
            <el-button-group>
                <el-button size="mini" icon="el-icon-refresh-left" @click="handleRefresh" ></el-button>
            </el-button-group>
            <el-button-group>
                <el-button type="primary" size="mini" icon="el-icon-plus"
                    @click="handleAdd()"
                >新增</el-button>
            </el-button-group>
        </template>
        <div class="l-rblock" >
            <l-table :columns="columns" :dataSource="tableShowData" :loading="tableLoading" row-key="f_ItemDetailId" >
                <template v-slot:f_EnabledMark="scope" >
                    <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="scope.row.f_EnabledMark"
                        @change="handleEnableChange(scope.row)"
                        >
                    </el-switch>
                </template>
                <l-table-btns :isAuth="false" :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </div>
    </l-panel>
    <l-dialog
        :title="formTitle"
        :visible.sync="formVisible"
        @ok="handleSave"
        @close="handleCloseForm"
        @opened="handleOpenedForm"
        >
        <dataitem-form ref="form" :classifyId="classifyId" :classifyTree="classifyTree" :pOptions="tableData" ></dataitem-form>       
    </l-dialog>
</l-layout>
</template>

<script>
const api = window.$api.data.dataItem

import dataitemForm from '../../views/dataItem/form'
export default {
    name:'l-dataitem-index',
    components: {
        dataitemForm
    },
    props: {
        classifyCode:String
    },
    data () {
        return {
            noAuth:true,
            //查询
            searchWord:'',
            searchTableData:null,

            tableLoading:false,
            columns: [
                {label:'项目名',prop:'f_ItemName',minWidth:'100'},
                {label:'项目值',prop:'f_ItemValue',minWidth:'100'},                
                {label:'排序',prop:'f_SortCode',width:'64',align:'center'},
                {label:'有效',prop:'f_EnabledMark',width:'64',align:'center'}
            ],
            tableBtns:[
                {prop:'Edit',label:'编辑'},
                {prop:'Delete',label:'删除'}
            ],

            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false,

            classifyTree:0,
            classifyId:'',
        };
    },
    created () {
        this.initPage()
    },
    mounted () {

    },
    computed:{
        tableData(){
            return this.lr_dataItem[this.classifyCode] || []
        },
        tableShowData(){
            let list = this.searchTableData || this.tableData;
            if(this.classifyTree == 1){
                list =  this.$toTree(list,"f_ItemDetailId","f_ParentId","f_ItemValue","f_ItemName")
            }
            return list;
        }
    },
    methods:{
        handleRefresh(){
            this.refreshTable()
        },
        async initPage(){
            this.pageLoading = true
            if(!this.classifyCode){
                this.$message({
                    type: 'error',
                    message: '没有设置分类编码，请设置!'
                })
            }
            else{
                const res = await api.getClassify(this.classifyCode)

                this.classifyId =  res.data.data.f_ItemId
                this.classifyTree = res.data.data.f_IsTree
                this.refreshTable()
            }
            this.pageLoading = false
        },
        async refreshTable(){
            this.searchWord = ''
            this.searchTableData = null
            this.tableLoading = true
            await this.lr_loadDataItem(this.classifyCode,false)
            this.tableLoading = false
        },

        hanleSearch(){
            if(this.searchWord){
                this.searchTableData = this.tableData.filter(item => item.f_ItemValue.indexOf(this.searchWord) >-1 || item.f_ItemName.indexOf(this.searchWord)>-1);
            }
            else{
                this.searchTableData = null;
            }
        },
        handleEnableChange(row){
            api.updateDetail(row.f_ItemDetailId,this.$deepClone(row)).then(()=> {
                this.$message({
                    type: 'success',
                    message: '更新成功!'
                })
                this.refreshTable()
            })
        },
        handleAdd(){
            this.formEdit = false
            this.showForm('新增数据项')
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.showForm('编辑数据项')
        },
        handleDelete($index,row){
            this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
            }).then(() => {
                api.removeDetail(row.f_ItemDetailId).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.refreshTable()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })     
            })
        },
        handleSave(showLoading,hideLoading){
            this.$refs.form.validateForm(()=>{
                showLoading()
                const formData = this.$refs.form.getForm()
                if(this.formEdit){// 修改数据
                    api.updateDetail(formData.f_ItemDetailId,this.$deepClone(formData)).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '更新成功!'
                        })
                        this.refreshTable()
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    api.addDetail(this.classifyCode,this.$deepClone(formData)).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.refreshTable()
                    }).catch(() => {
                        hideLoading()
                    })
                }
            })
        },
        handleOpenedForm(){
            if(this.formEdit){
                this.$refs.form.setForm(this.formEditRow); 
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm();
        },
        showForm(text){
            this.formTitle = text;
            this.formVisible = true;
        }
    }

}
</script>